<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style type="text/css">
		html,body{
			width: 100%;
			height: 100%;
		}
		.container{
			/* display: flex; */
			/* align-items: center;
			justify-content: center; */
		}
	</style>
	<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
	</head>
	<body>
		<div style="height: 80%;" class="container panel panel-default">
			<div style="width: 102.5%;background-color: #1B6D85;height: 50px;" class="row">
				<div class="col-md-10">
					<span style="color: white;font-size: 30px;">宿舍管理系统</span>
				</div>
				<div  class="col-md-2">
					<label><span style="color: white;">用户名：</span></label>
					<span class="user_name" style="color:red;font-size: 20px;">XXX</span>
				</div>
			</div>
			<br><br><br><br>
			<div id="" class="row">
				<div id="" class="col-md-4">
					<div style="width: 200px;text-align: center;" class="list-group">
					  <a style="background-color: #00007f;color: white;" href="#" class="list-group-item disabled">
					    首页
					  </a>
					  <a href="#" class="list-group-item" onclick="code()">缺勤记录</a>
					  <a href="#" class="list-group-item" onclick="edit_psd()">修改密码</a>
					  <a href="#" class="list-group-item" onclick="exit()">退出系统</a>
					  
					</div>
				</div>
				<div id="" class="col-md-6">
					<h1>欢迎您 同学</h1>
					<div class="box" id="box">
						<div class="row" hidden id="btn">
							<!-- 搜索 -->
							<div class="dropdown col-md-2 col-md-offset-1">
							  <button style="width: 80px;" class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
							    名字	
							    <span class="caret"></span>
							  </button>
							  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
							    <li><a href="#">Action</a></li>
							    <li><a href="#">Another action</a></li>
							    <li><a href="#">Something else here</a></li>
							    <li role="separator" class="divider"></li>
							    <li><a href="#">Separated link</a></li>
							  </ul>
							</div>
							<div class="col-md-4">
								<input style="height: 30px;" type="text" name="" id="" value="" />
								</div>
								<div class="col-md-1">
								<input style="height: 30px;" type="button" name="" id="" value="搜索" />
							</div>
						</div>
						<br>
						<!-- <button type="button" class="btn btn-success" " data-toggle="modal" data-target="#myModal" id="btn_modclick" hidden onclick="modal_click()"><span id="btn_modclick" hidden>添加</span></button> -->
						<!-- 表格 -->
						<table style="width: 100%;font-size:20px" cellspacing="" cellpadding="" hidden class="table table-striped table-bordered table-hover" id="mytable2">
							<thead>
								<th>编号</th>
								<th>姓名</th>
								<th>地址</th>
								<th>日期</th>
								<th>备注</th>
							</thead>
							<tbody>
							</tbody>
						</table>
						<!-- 修改密码 -->
						<form style="text-align: right;margin-right: 50%;margin-top: 10%;" action="" method="" hidden id="edit_psd">
							<label style="font-size:20px;"><span style="color: red;">*</span>原密码</label>
							<input type="password" name="old_psd" id="" value="" />
							<br><br>
							<label style="font-size:20px;"><span style="color: red;">*</span>新密码</label>
							<input type="password" name="new_psd" id="" value="" />
							<br><br>
							<label style="font-size:20px;"><span style="color: red;">*</span>确认密码</label>
							<input type="password" name="c_psd" id="" value="" />
							<br><br>
							<input style="margin-right: 22%;width:15;height:5%" class="btn btn-success" type="button" name="psd_save" id="" value="提交" />
						</form>
					</div>
					
				    </div>
				</div>
			</div>
		</div>
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//当前登入用户
			let a,b,c;
			let user_name = JSON.parse(localStorage.getItem("s_name"));
			console.log(user_name)
			let user_psd = user_name.psd;
			let date =[];
			let date_code = [];
			$(".user_name").text(user_name.user);
			let $tbody2 = $("#mytable2").find("tbody");
			//退出系统
			function exit(){
				window.location.href="login.html";
			}
			//缺勤记录
			function code(){
				if(a === 1){
					$("h1").slideUp();
					$("btn_modclick").show();
					$("btn").show();
					$("#mytable1").hide();
					$("#edit_psd").hide();
					$("#mytable2").show();
				}else{
					$("#edit_psd").hide();
					$("h1").slideUp();
					$("btn_modclick").show();
					$("btn").show();
					$("#mytable1").hide();
					$("#mytable2").show();
					return a = 1;
				}
				
			}
			//改密码
			function edit_psd(){
				$("h1").slideUp();
				$("#mytable1").hide();
				$("#mytable2").hide();
				$("#edit_psd").show();
			}
			//改密码
			$("input[name='psd_save']").click(function(){
				let old_psd = $("input[name='old_psd']").val();
				let new_psd = $("input[name='new_psd']").val();
				let c_psd = $("input[name='c_psd']").val();
				let new_manager =
				{
					user:user_name.user,
					psd:c_psd,
				}
				console.log(old_psd,new_psd,c_psd,user_psd);
				if(old_psd !== user_psd){
					alert("密码不正确");
					return false;
				}else if(new_psd === user_psd){
					alert("新密码不能和原密码相同");
					return false;
				}else if (c_psd !== new_psd){
					alert("两次输入的密码不正确");
					return false;
				}
				manager_data.splice(b,1,new_manager);
				console.log(manager_data);
				localStorage.setItem("sign_manager",JSON.stringify(manager_data));
				alert("修改成功，请重新登入");
				window.location.href="login.html";
			})
			//表格数据
			let arr_node = JSON.parse(localStorage.getItem("arr_node"));
			let stu_code = JSON.parse(localStorage.getItem("newstu_code"));
			console.log(arr_node);
			console.log(stu_code);
			if(arr_node){
				for(let index in arr_node){
					let item = arr_node[index];
					date.push(item.date);
				}
				console.log(date);
			}
			function update(){
				for(index in arr_node){
					let item = arr_node[index]
					if(item.name === user_name.user){
						let tr =
						`
						<tr>
						<td>${item.id}</td>
						<td>${item.name}</td>
						<td>${item.lou+item.room}</td>
						<td>${item.date}</td>
						<td>${item.beizhu}</td>
						</tr>
						`;
						$tbody2.append(tr);
					}
				}
			}
			update();
		</script>
	</body>
</html>
